---
title: Manual Installation
description: Add dependencies to your project manually.
---

<Steps>

### Add Tailwind CSS

Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project.

<Link href="https://tailwindcss.com/docs/installation">Follow the Tailwind CSS installation instructions to get started.</Link>

### Add dependencies

Add the following dependencies to your project:

```bash
npm install @udecode/cn tailwindcss-animate class-variance-authority tailwind-merge lucide-react
```

### Configure path aliases

We use the `@` alias. This is how we configure it in `tsconfig.json`:

```json {3-6} title="tsconfig.json"
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}
```

The `@` alias is a preference. You can use other aliases if you want.

**If you use a different alias such as ~, you'll need to update import statements when adding components.**

### Configure tailwind.config.js

Here's what our `tailwind.config.js` file looks like:

<ComponentSource
  src="../../templates/plate-playground-template/tailwind.config.js"
  open
/>

### Configure styles

Add the following to your `styles/globals.css` file. You can learn more about using CSS variables for theming in the [theming section](/docs/components/theming).

<ComponentSource
  src="../../templates/plate-playground-template/src/styles/globals.css"
  open
/>

### Run the CLI

```bash
npx @udecode/plate-ui@latest init
```

### Configure plate-components.json

You will be asked a few questions to configure `plate-components.json`:

```txt showLineNumbers
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › src/style/globals.css
Do you want to use CSS variables for colors? › no / yes
Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) ...
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for ui: › @/components/plate-ui
Are you using React Server Components? › no / yes
```

### Add TooltipProvider

Wrap your editor with `TooltipProvider`. Here's an example:

<ComponentSource src="../../templates/plate-template/src/app/layout.tsx" />

### Add icons

Add the icons you'll use in `components/icons.tsx`:

<ComponentSource src="../../templates/plate-playground-template/src/components/icons.tsx" />

We use icons from <Link href="https://lucide.dev">Lucide</Link>. You can use any icon library you want.

### Add components

You can now start adding components to your project.

```bash
npx @udecode/plate-ui@latest add button
```

The command above will add the `Button` component to your project. You can then import it like this:

```tsx {1,6} showLineNumbers
import { Button } from '@/components/plate-ui/button';

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}
```

### Register components

To add the components to your plugins, see [Plugin Components](/docs/plugin-components#register-components).

</Steps>
